<template>
	<div class="form-wrap">
		<!-- model--数据  rules---验证规则 -->
		<el-form ref="form" :model="user" :rules="userRules" label-width="80px">
			<!-- prop="" 添加验证规则 -->
			<el-form-item label="用户名:" prop="name">
				<el-input v-model="user.name" placeholder="请输入用户名">
					<i slot="suffix" class="el-input__icon el-icon-user"></i>
				</el-input>
			</el-form-item>
			<el-form-item label="密码:" prop="pwd">
				<el-input v-model="user.pwd" placeholder="请输入密码">
					<i slot="suffix" class="el-input__icon el-icon-key"></i>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	name: "SignIn",
	data() {
		return {
			user: {
				name: "yyyyyyy",
				pwd: "yyyyyyy",
			},
			userRules: {
				name: [
					{ required: true, message: "用户名不能为空", trigger: "blur" },
					{ min: 3, max: 9, message: "长度在 3 到 9 个字符", trigger: "blur" },
				],
				pwd: [
					{ required: true, message: "密码不能为空", trigger: "blur" },
					{
						min: 6,
						max: 18,
						message: "长度在 6 到 18 个字符",
						trigger: "blur",
					},
				],
			},
		};
	},
	methods: {
		onSubmit() {
			// 通过验证执行登录
			// console.log(this.$refs.form);
			this.$refs.form.validate((valRs) => {
				// 验证结果
				// console.log(valRs);
				if (valRs) {
					// 请求接口执行登录
					// 通过触发action
					this.$store
						.dispatch("loginAction", {
							userName: this.user.name,
							password: this.user.pwd,
						})
						.then((d) => {
							// console.log(d);
							if (d.code == 1) {
								// 登录成功跳转页面
								this.$router.back(); //从哪来,返回哪里
								// this.$router.push('/');//跳转指定页面
								// this.$router.replace('/');//跳转指定页面,无历史记录
							} else {
								// 弹出框提示
								this.$alert(d, "提示", {
									confirmButtonText: "确定",
								});
							}
						});
				} else {
					// 弹出框提示
					this.$alert("请输入正确的用户名密码", "提示", {
						confirmButtonText: "确定",
					});
				}
			});
		},
	},
};
</script>
<style scoped lang="scss">
.form-wrap {
	width: 450px;
	margin: 100px auto;
}
</style>
